<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>This is Chat Room</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<style type="text/css">
#chat {
  position: absolute;
  left: 200px;
  top: 520px;
}
#send {
  height:40px;
  width:90px;
  position: absolute;
  left: 780px;
  top: 650px; 
  }
#message {
  background-color: gray;
  height:500px;
  width:675px;
  position: absolute;
  left: 200px;
  top: 20px; 
  overflow:scroll;
}
</style>
</head>
<body>
<table style="width:800px;">
<tr >
<h3>登录的人</h3>
<td id="usernamelist" style="width:100px;"></td>
</tr>
<tr><td colspan="2" >
<button id="logout" onclick="logout();">Logout</button><br>
<textarea rows="8" cols="80" id="chat"></textarea><br>
<button id="send"  onclick="sendChat();">发送</button>
</td></tr>
</table>
<div id="message"></div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function() {
	//get username list
	getUsernameList();
	//get message list
	getMessage();
});

function getUsernameList() {
	$.get("UsernameListServlet", function(data) {
		var users = data.split(",")
		var dom = "";
		dom = users.join("<br>");//u1<br>u2<br>u3<br>
		$("#usernamelist").html(dom);
	}, "text");
}

function getMessage() {
	$.get("ChatMessageServlet", function(data){
		var messages = data.split("||");
		var dom = messages.join("<br>");
		$("#message").html(dom);
	}, "text"
	);
}

function doall() {
	getUsernameList();
	getMessage();
}

function logout() {
	window.location="index.html";
}

/* function sendChat() {
	var u = $.cookie('loginuser');
	var content = $("#chat").val();
	$.get("SendChatServlet", "message=" + u + ":" + content+"<br>", function(data){
		$("#chat").val("");
		$("#message").html($("#message").html() + "<br>" + u + ":" + content + "<br>");
	});
} */

  	function sendChat() {
	var u = $.cookie('loginuser');
	var content = $("#chat").val();
	$.get("SendChatServlet", "message=" + content+"<br>", function(data){
		$("#chat").val("");
	 	$("#message").html($("#message").html() + "<br>" + u + "<br>"+ $.session('time')+"<br>"+ content + "<br>");  
	});
}   
setInterval(doall, 1000);

</script>